<template>
<div class="scrollwarp" :style='{ height }'>
  <div>
    <div>
    
      <Header :title_="title_"></Header>
      <div class="top-block">
        <img :src="Indexx.img" />
      </div>
      <div class="pro_title">
        <div class="n-font">{{Indexx.title}}</div>
        <p class="cr">{{Indexx.subtitle}}</p>
      </div>
      <div class="goods-detail">
        <div class="editor-frame">
          <p></p>
          <p>
            <br />
          </p>
          <p>活动时间：{{Indexx.publish_date}}</p>
          <p>
            页面可领
            <strong>满200-20、300-30、400-40、500-50元</strong>店铺券；
          </p>
          <p>
            及
            <strong>分享3人得满400-70元店铺券</strong>
          </p>
          <p>
            以上均可叠加
            <strong>满300-30元跨店满减</strong>
          </p>
          <p>双券叠加做到：满300-60、400-70、500-80元力度；</p>
          <p>
            叠加分享券可做到：
            <strong>满400-100元，多款叠此券单买好价</strong>
          </p>
          <p></p>
        </div>
        <div class="editor-frame2">
          <a
            isconvert="1"
            href="http://go.shihuo.cn/u?url=https%3A%2F%2Fpeak.tmall.com%2F%3Fclk1%3D40cfa8835d4fff8e1b49302601783aa9%26upsid%3D40cfa8835d4fff8e1b49302601783aa9&amp;tp=3&amp;title=%E5%8C%B9%E5%85%8B%E5%AE%98%E6%96%B9%E6%97%97%E8%88%B0%E5%BA%97+88%E4%BC%9A%E5%91%98%E8%8A%82&amp;news_id=590812"
            target="_blank"
            data-track="from/shihuo-content-img-匹克官方旗舰店 88会员节"
          >
            <img
              src="http://shihuo.hupucdn.com/ucditor/20200805/600x234_fde2e4e20a5154209a04cb706ad76e90.jpeg?imageMogr2/format/jpg%7cimageView2/2/w/700/interlace/1"
            />
          </a>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script>
//引入滚动
import BetterScroll from "better-scroll";
//引入搜素
import Header from "@/components/Header/Header";

export default {
  components: {
    Header,
  },
  data() {
    return {
      title_: "信息详情",
      Indexx: [],
      height:0,
        //滚动对象
        scroll:null,
    };
  },
  mounted() {
    let a = this.$route.params.index;
    let url = "http://localhost:8080/data/discounts.json";
    this.$axios.get(url).then((ret) => {
      // console.log(ret.data);
      this.Indexx = ret.data[a];
    });
    //外层滚动容器高度
    this.height = document.documentElement.clientHeight  + 'px'
  },
  created() {
    this.$bus.$emit("yincang", false);
  },
  beforeDestroy() {
    this.scroll = null;
    this.$bus.$emit("yincang", true);
  },
  updated() {
    this.$nextTick(()=>{
      this.scroll = new BetterScroll('.scrollwarp',{
        click: true,
      })
    })
  }
};
</script>

<style lang="scss" scoped>
.top-block {
  width: 375px;
  height: 326px;
  background: #fff;
  padding-left: 35px;
  img {
    width: 300px;
    height: 326px;
    vertical-align: middle;
    border: none;
    outline: 0;
  }
}
.pro_title {
  background: #fff;
  color: #333333;
  width: 100%;
  padding: 10px 10px;
  .n-font {
    color: #333333;
    width: 100%;
    font-size: 17px;
    font-weight: normal;
  }
  .cr {
    color: #ff4338;
    margin-top: 5px;
    clear: both;
    font-size: 15px;
  }
}
.goods-detail {
  width: 100%;
  background: #fff;
  padding: 0px 10px;
  margin-bottom: 20px;
  .editor-frame {
    width: 100%;
    p {
      padding: 5px 0;
      font-size: 15px;
      line-height: 30px;
      color: #333;
      white-space: pre-line;
    }
  }
}
.editor-frame2 {
  a {
    text-decoration: none;
    color: #2a67a6;
    display: block;
    margin-right: 20px;
    img {
      display: block;
      margin: 0 auto;
      // vertical-align: top;
      max-width: 100% !important;
      height: auto !important;
    }
  }
}
</style>